@import "node_modules/quill/dist/quill.bubble";


.ql-editor {
    @apply .font-serif .text-lg .leading-loose;
    padding: 0;
    word-break: break-word;
    overflow-y: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ql-editor p,
.ql-editor ul,
.ql-editor ol,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor blockquote,
.ql-editor pre {
    min-width: 100%;
}

.ql-editor h2 {
    margin-top: 0 !important;
    margin-bottom: 33px !important;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2.6rem;
}

.ql-editor h3 {
    margin-bottom: 33px !important;
    font-size: 17px !important;
    font-weight: bold;
    line-height: 2.6rem;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote {
    margin-bottom: 33px !important;
}

.ql-bubble .ql-editor pre.ql-syntax {
    background: rgba(238, 238, 238, 0.35);
    border: solid 2px rgba(0, 0, 0, 0.05);
    color: #000;
    overflow-x: auto;
    padding: 0.5em;
}

.ql-editor h1,
.ql-editor h2 {
    margin-top: 56px;
    margin-bottom: 15px;
}

.ql-editor ol,
.ql-editor ul {
    padding-left: 0;
}

.ql-editor ol li,
.ql-editor ul li {
    margin-bottom: 20px;
}

.ql-bubble .ql-editor a {
    @apply .text-primary .no-underline;
}

.ql-container hr {
    border: none;
    color: config('colors.text-color');
    letter-spacing: 1em;
    text-align: center;
    @apply mb-20;
}

.ql-container hr:before {
    content: '...';
}

#sidebar-controls {
    display: none;
    position: absolute;
    @apply z-10;
}

#sidebar-controls .controls button {
    @apply rounded-full w-8 h-8 border border-light text-light text-center pt-1;
}

#sidebar-controls .controls button:hover {
    @apply bg-light text-contrast;
}

#sidebar-controls button:focus {
    @apply outline-none;
}

#sidebar-controls.active .controls {
    @apply inline-block;
}

.inline_html {
    position: relative;
    margin-bottom: 33px !important;
}

.inline_html:hover {
    box-shadow: 0 0 0 3px config('colors.primary');
}

.inline_html:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    cursor: default;
}

.embedded_image {
    margin-bottom: 33px !important;
    cursor: default;
}

.embedded_image[data-layout="wide"] img {
    max-width: 1024px;
}

.embedded_image img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.embedded_image:hover img {
    box-shadow: 0 0 0 3px config('colors.primary');
}

.embedded_image p {
    text-align: center;
    margin-bottom: 0 !important;
}

.ql-editor.ql-blank::before {
    color: config('colors.light');
    left: 0;
    font-style: normal;
}
